<template>
  <!-- html:由template标签包住 
       注意点：只能有一个根元素
  -->
  <div>
    hello
    <span class="red">123456</span>
    <button @click="btnClick">点击事件</button>
    <div>123</div>
    <div>{{ num }}</div>
    <h1>{{ newNum }}</h1>
  </div>
</template>

<script>
// js:data是一个function再return { 属性名:值}
export default {
  data () {
    return {
      num: 1
    }
  },
  computed: {
    newNum () {
      return 1 + '元'
    }
  },
  methods: {
    btnClick () {
      this.num++
    }
  }
}
</script>

<style>
/* css:导入css时  @import url(路径) */
@import url('./xxx.css');
.red {
  color: red;
}
</style>
